<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		body,ul,li,div,p,h1,h2,ol{margin:0;padding: 0;}
		body{margin: 5px 0 0 0;font-family: "微软雅黑"; }
		ul,li,ol{list-style: none;}
		.common_btn_red{
			display: inline-block;
			border: 1px solid red;
			background-color: red;
			border-radius: 5px;
			color: whitesmoke;
			text-align: center;
			vertical-align: middle;
			width: 80px;
			height: 25px;
			line-height: 25px;
		}
		hr{
			border: 3px solid ghostwhite;
		}
	</style>
	<style>
		div{
			border: 0px solid red;
		}

		#con{
			width: 80%;
			margin: auto;
		}
		#con .header{
			position: relative;
		}
		#con .header .close{
			position: absolute;
			right: 20px;
			top:20px;
		}
		#con .content table{
			width: 100%;
		}
		#con .content table tr{
			background-color: #fafafa;
		}
		tr td input[type="checkbox"]{
			position: relative;
			top:-60px;
		}
		#con .content table tr:nth-child(1){
			background-color: white;
		}
		#con .content table tr td{
			border-bottom: 1px solid ghostwhite;
		}
		.footer_div{
			background-image: url(imgs/bg_footer.png);
			background-size: 100% 100%;
			height: 80px;
			margin-top: 20px;
			border: 0px solid red;
			vertical-align: middle;
			line-height: 80px;
		}
		.footer_div:after{
			content: "";
			display: block;
			clear: both;
		}
		.footer_div .common_btn_red{
			margin-top: 30px;
			margin-right: 30px;
			float: right;
		}
		.footer_div .zyf{
			margin-left: 300px;
		}

	</style>
	<link rel="stylesheet" type="text/css" href="css/goods_num.css" />
</head>
<body>

<div id="con">
	<div class="header">
				<span class="logo">
					<img  src="imgs/dangdang_logo.png" />
				</span>
		<span class="close common_btn_red">关闭</span>
	</div>
	<hr/>
	<div class="content">
		<table cellspacing="0" cellpadding="0">
			<thead>
			<tr>
				<td>
					全选
				</td>
				<td>
					商品信息
				</td>
				<td>
					单价（元）
				</td>
				<td>
					数量
				</td>
				<td>
					金额（元）
				</td>
				<td>
					操作
				</td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>
					<input type="checkbox" value="" id="checkAll"/><h2>当</h2>
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" value="" name="good_name_ck" />
					<span class="goods_img">
									<img src="imgs/book1.png" style="width:100px;height: 150px;"/>
								</span>
				</td>
				<td>
					白岩松：自说
				</td>
				<td>
					￥12.3
				</td>
				<td>
					<input type="button" value="-" class="good_min_btn"/><input type="text" value="0" class="good_num"/><input type="button" value="+" class="good_add_btn"/>
				</td>
				<td>
					￥24.6
				</td>
				<td>
								<span>
									移入收藏
								</span>
					<br/>
					<span>
									删除
								</span>
				</td>
			</tr>

			<tr>
				<td>
					<input type="checkbox" value="" name="good_name_ck"/>
					<span class="goods_img">
									<img src="imgs/book1.png" style="width:100px;height: 150px;"/>
								</span>
				</td>
				<td>
					小麦田
				</td>
				<td>
					￥12.3
				</td>
				<td>
					<input type="button" value="-" class="good_min_btn"/><input type="text" value="0" class="good_num"/><input type="button" value="+" class="good_add_btn"/>
				</td>
				<td>
					￥24.6
				</td>
				<td>
								<span>
									移入收藏
								</span>
					<br/>
					<span>
									删除
								</span>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
	<div class="footer_div">
		<input type="checkbox" value="" id="checkAll2"/>全选&nbsp;&nbsp;&nbsp;&nbsp;批量删除
		已选择<span id="checkGoodNum">0</span>件商品


		<span class="zyf">
					总计不含运费￥68.8 已节省：￥10
				</span>
		<span class="common_btn_red">结算</span>
	</div>
</div>


<script>


	var  checAay = document.getElementsByName("good_name_ck");
	for(var index in checAay){
		checAay[index].onclick = function(){
			countGoodsNum();
		}
	}

	var checkAll = document.getElementById("checkAll");
	var checkAll2 = document.getElementById("checkAll2");
	var checMethod = function(){
		var isCheck = this.checked;
		var checkOrNot = false;
		if(isCheck){
			checkOrNot = true;
		}else{
			checkOrNot = false;
		}
		for(var index in checAay){
			checAay[index].checked = checkOrNot;
		}
		countGoodsNum();
	};
	if(checkAll || checkAll2){
		checkAll.onclick = checMethod;
		checkAll2.onclick = checMethod;
	}
	/**
	 * 计算并设置商品选中的数量
	 */
	function countGoodsNum(){
		var checkGoodNum = 0;
		var  checAayTemp = document.getElementsByName("good_name_ck");
		for(var i = 0,len = checAayTemp.length;i<len;i++){
			var isCheck = checAayTemp[i].checked;
			if(isCheck){
				checkGoodNum ++;
			}
		}
		document.getElementById("checkGoodNum").innerHTML = checkGoodNum;
	}
</script>

<script src="js/goods_num.js"></script>
</body>
</html>
